<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器滚动距离</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html, body{
            height: 300vh;
            width: 300vw;
        }
    </style>
</head>
<body>
    <div style="width: 100px; height: 300px;" id="box"></div>
    <button id="btn" style="width: 500px;">回到顶部</button>
    <script>
        // 2. 窗口滚动事件
        window.onscroll = function() {
            console.log("页面滚动了！", window.scrollY);
            console.log("页面滚动了1！",document.documentElement.scrollTop);
            console.log("页面滚动了2！",document.body.scrollTop);
            // if((window.scrollY || document.documentElement.scrollTop || document.body.scrollTop) >= 200){
            //     document.getElementById("btn").style.position = "fixed";
            //     document.getElementById("btn").style.top = "0px";
            // } 

            console.log("页面横向滚动了！", window.screenX);
            console.log("页面横向滚动了1！",document.documentElement.scrollLeft);
            console.log("页面横向滚动了2！",document.body.scrollLeft);
        };

        btn.onclick = function() {
            // 1. 滚动到顶部
            // window.scrollTo(0, 0);
            window.scrollTo({
                left: 0,
                top: 0
            })
        };
    </script>
</body>
</html>